<template>
	<view class="allGoods">
		<view class="bg">

			<view class="title" :style="'padding-top:'+titleHeight +'px'">
				<u-icon @click="goBack" name="arrow-left" color="#2979ff" size="28"></u-icon>
				<text>全部商品</text>
			</view>
		</view>
		<view class="allGoods-top">
			<view class="allGoods-top-left">
				<!-- :class="addColor(index)" -->
				<text :class="currentIndex == index?'colorStyle':''" v-for="(item,index) in sortData" @click="goodsSort(item,index)">{{item}}</text>
			</view>
			<view class="allGoods-top-right">
				<text @click="filterStor">筛选</text>
			</view>
		</view>
		<view class="allGoods-bottom">
			<view class="allGoods-bottom-box" :key="item.id" v-for="item in showList">
				<image :src="item.goods_img" mode=""></image>
				<view class="allGoods-bottom-text">
					<text>防寒服冬季防风加厚外套户外加绒内..</text>
					<view class="allGoods-bottom-price">
						<view class="Goods-price">
							<text>￥</text>
							<text>{{item.goods_price}}</text>
						</view>
						<text>可减{{item.reduce_price}}元</text>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 弹窗 -->	
				<u-popup :show="show" :round="10" mode="bottom" @close="show = false" closeable="true">
					<view class="popup-content">
						<view class="all-filter">全部筛选</view>
						
						<view class="filter-content">
							<view>
								<text>价格</text>
								<view class="price-input">
									<input type="digit" placeholder="最低价" v-model="inpValue" />
									<text>—</text>
									<input type="digit" placeholder="最高价" v-model="inpValue1" />
								</view>
							</view>
							
							<view>
								<text>品牌</text>
								<view class="brand-select">
									<text :key="index" v-for="(item,index) in goodsBrand" @click="clickBrand(item,index)" :class="brandIndex == index?'bcStyle':''">{{item}}</text>
								</view>
							</view>
							<view>
								<text>尺码</text>
								<view class="size-select">
									<text :key="index" v-for="(item,index) in goodsSize" @click="clickSize(item,index)" :class="sizeIndex == index?'bcStyle':''">{{item}}</text>
								</view>
							</view>
						</view>
				
						<view class="botton-btn">
							<text @click="resiteFilter">重置</text>
							<text @click="finishFiliter">完成</text>
						</view>
				
					</view>
				</u-popup>
	
	</view>
</template>

<script>
	// import { Mounted } from "vue"
	import { onLoad, onShareAppMessage, onPageScroll } from '@dcloudio/uni-app'

	export default {
		data() {
			return {
				show: false,
				titleHeight: 0,
				sortData: ["综合", "销量", "价格"],
				sizeIndex: -1,
				brandIndex: -1,
				currentIndex: -1,
				brandColor: true,
				sizeColor: true,
				color: true,
				inpValue: "",
				inpValue1: "",
				brandValue: "",
				sizeValue: "",
				goodsSize: ["S", "M", "L", "XL", "XXL"],
				goodsBrand: ["探路者", "哇哈哈", "蜜雪冰城", "哈哈哈哈","哈哈哈","哈哈哈哈","哈哈哈","哈哈哈哈"],
				showList: [],
				shopList: [
					{
						id: 1,
						goods_img: "https://img2.baidu.com/it/u=1333632271,3938125842&fm=253&fmt=auto&app=138&f=JPEG?w=414&h=267",
						goods_name: "防寒服冬季防风加厚外套户外加绒内...",
						goods_price: "500",
						reduce_price: "100",
						goods_sales: 500
				},
					{
						id: 2,
						goods_img: "https://inews.gtimg.com/newsapp_bt/0/13663854841/1000",
						goods_name: "防寒服冬季防风加厚外套户外加绒内...",
						goods_price: "600",
						reduce_price: "50",
						goods_sales: 800
					}, {
						id: 3,
						goods_img: "https://t10.baidu.com/it/u=217782862,169879464&fm=30&app=106&f=JPEG?w=600&h=810&s=520329E0826B84F4C3D4EC1B030040CD",
						goods_name: "防寒服冬季防风加厚外套户外加绒内...",
						goods_price: "500",
						reduce_price: "100",
						goods_sales: 20,
					}, {
						id: 4,
						goods_img: "https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b60064a6d53be750352ac75cb7d6",
						goods_name: "防寒服冬季防风加厚外套户外加绒内...",
						goods_price: "100",
						reduce_price: "20",
						goods_sales: 423,
					}]
			}

		},
		mounted() {
			this.getHeight();
			this.showList = this.shopList
			console.log("showList", this.showList);
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},

			goBack() {
				console.log("回退");
				uni.switchTab({
					url: "/pages/index/index"
				})
			},

			getHeight() {
				let res = uni.getMenuButtonBoundingClientRect();
				this.titleHeight = res.top
			},

			sortBy(sttr, rev) {
				if (rev == undefined) {
					rev = 1
				} else {
					(rev) ? 1: -1
				}
				return function(a, b) {
					a = a[sttr];
					b = b[sttr];
					if (a < b) {
						return rev * -1
					}
					if (a > b) {
						return rev * 1
					}
					return 0
				}
			},

			goodsSort(item, index) {
				this.currentIndex = index
				if (item == "综合") {
					console.log("综合点击了");
					this.showList.sort(this.sortBy("id", 1))
				}
				if (item == "销量") {
					console.log("销量点击了");
					this.showList.sort(this.sortBy("goods_sales", 1))
				}
				if (item == "价格") {
					console.log("销量点击了");
					this.showList.sort(this.sortBy("goods_price", 1))
				}

			},

			clickSize(item, index) {
				this.sizeIndex = index;
				this.backColor = true
				console.log("点击了尺码", item);
				this.sizeValue = item;
			},

			clickBrand(item, index) {
				this.brandIndex = index;
				console.log("点击了尺码", item);
				this.brandColor = true
				this.brandValue = item;
			},
			addBrandColor(index) {
				if (this.brandIndex == index) {


					return { bcStyle: this.brandColor }
				}
			},

			addBackColor(index) {
				if (this.sizeIndex == index) {
					// this.brandColor=true
					return { bcStyle: this.backColor }
				}
			},
			//打开弹框
			filterStor() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				// this.$refs.popup.open('bottom')
				this.show = true
			},
			//重置
			resiteFilter() {
				this.inpValue = "";
				this.inpValue1 = "";
				this.sizeValue = "";
				this.brandValue = "";
				this.sizeIndex = -1;
				this.brandIndex = -1;
			},
			//完成
			finishFiliter() {
				console.log("inpValue", this.inpValue);
				console.log("inpValue1", this.inpValue1);
				console.log("inpValue1", this.sizeValue);
				console.log("inpValue1", this.brandValue);
				this.sizeIndex = -1;
				this.brandIndex = -1;
				this.show = false;
				this.inpValue = "";
				this.inpValue1 = "";
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},

		}


	}
</script>

<style lang="less">
	.colorStyle {
		color: red;
		
	}

	.bcStyle {
		background-color: red;
		color: aliceblue !important;
		border: 1px solid transparent !important;
		/* box-shadow:#DD2E23 0 0 20rpx; */
	}

	.title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30rpx;
		background-image: linear-gradient(to right, #45E682, #32E0A9);
		/* background-color: #33E0A8; */
		padding-bottom: 20rpx;

	}

	.title>text {
		margin-left: 250rpx;
	}

	.allGoods {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.allGoods-top {
		display: flex;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 40rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.allGoods-top-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 360rpx;
	}

	.allGoods-top-right {
		display: flex;
		align-items: center;
	}

	.allGoods-bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.allGoods-bottom-box {
		width: 330rpx;
		height: 470rpx;
		box-shadow: #f9f9f9 0 0 10rpx;
		background-color: #f9f9f9;
		margin-bottom: 20rpx;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.allGoods-bottom-box>image {
		width: 320rpx;
		height: 320rpx;
	}

	.allGoods-bottom-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.allGoods-bottom-text>text:first-child {
		font-size: 28rpx;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.allGoods-bottom-text>view:last-child {
		color: red;
		padding: rpx;
		display: flex;
		justify-content: flex-start;
		padding: 20rpx;
	}

	.allGoods-bottom-text>view:last-child>text:last-child {
		font-size: 24rpx;
		display: flex;
		align-items: flex-end;
		margin-left: 25rpx;
	}

	.Goods-price {
		display: flex;
		align-items: flex-end;
	}

	.Goods-price>text:first-child {
		font-size: 38rpx;
	}

	// 弹框
		.popup-content {
			display: flex;
			flex-direction: column;
			width: 750rpx;
			height: 1000rpx;
			justify-content: space-between;
			background-color: #fff;
			box-sizing: border-box;
		}
		
		.all-filter{
			text-align: center;
			font-size: 34rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
		.u-popup__content__close{
			.u-icon__icon{
				top: -10rpx !important;
			}
		}
	
		
		.filter-content {
			padding: 0 40rpx;
			display: flex;
			flex-direction: column;
			overflow: scroll;
			
		}
		
		.filter-content>view {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			margin-bottom: 50rpx;
			
			&>text{
				width: 100%;
				margin-bottom: 20rpx;
			}
		}
		
		.price-input {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.price-input>input {
			height: 70rpx;
			width: 300rpx;
			border: 1rpx solid #E4E4E4;
			border-radius: 10rpx;
			background-color: #F6F6F6;
			border-radius: 50rpx;
			text-align: center;
		}
		.price-input>text{
			color: #999999;
			margin: 0 20rpx;
		}
		
		.brand-select,
		.size-select{
			display: flex;	
			flex-wrap: wrap;
			justify-content: space-between;
		}
	
		.brand-select>text,
		.size-select>text {
			border: 1rpx solid #999999;
			padding: 10rpx 20rpx;
			text-align: center;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			width: 130rpx;
			overflow-x: hidden;
			color: #999999;
		}
		.brand-select::after,
		.size-select::after{
			content: '';
			padding: 10rpx 20rpx;
			width: 130rpx;
			margin-bottom: 20rpx;
			border: 1px solid transparent;
		}
		
		.botton-btn {
			display: flex;
			height: 120rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
		}
		
		.botton-btn>text:first-child {
			flex: 1;
			background-color: #F2F2F2;
			height: 100%;
			text-align: center;
			line-height: 80rpx;
			width: 250rpx;
			border-radius: 60rpx 0 0 60rpx;
		
		}
		
		
		.botton-btn>text:last-child {
			flex: 1;
			background-color: red;
			color: #fff;
			height: 100%;
			line-height: 80rpx;
			text-align: center;
			border-radius: 0 60rpx 60rpx 0;
		}
</style>
